<template>
  <el-dialog v-model="dialogFormVisible" title="个人资料" width="40%">
    <el-form :model="userInfo">
      <el-form-item label="昵称" :label-width="formLabelWidth" required>
        <el-input v-model="userInfo.nickname" :disabled="modify"></el-input>
      </el-form-item>
      <el-form-item label="T_id" :label-width="formLabelWidth">
        <el-input v-model="userInfo.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" required>
        <el-input v-model="userInfo.age" :disabled="modify"></el-input>
      </el-form-item>
      <el-form-item label="性别" :label-width="formLabelWidth" required>
        <el-input v-model="userInfo.gender" :disabled="modify"></el-input>
      </el-form-item>
      <el-form-item label="学校" :label-width="formLabelWidth" required>
        <el-input v-model="userInfo.school" :disabled="modify"></el-input>
      </el-form-item>
      <el-form-item label="职业" :label-width="formLabelWidth" required>
        <el-input v-model="userInfo.job" :disabled="modify"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="okForm" :disabled="modify">搞定O(∩_∩)O</el-button>
        <el-button @click="modifyForm" :disabled="!modify">修改(╥╯^╰╥)</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script lang="ts">
import { ElNotification } from 'element-plus'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { getUserInfo, changeUserInfo } from '../api/index'
import { useRouter } from 'vue-router'
interface interfaceUserInfo {
  nickname: string
  id: number
  age: number
  gender: string
  school: string
  job: string
}
export default defineComponent({
  setup() {
    /* eslint-disable */
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const modify = ref(true)
    const show = () => {
      dialogFormVisible.value = true
    }
    const hidden = () => {
      dialogFormVisible.value = false
    }
    const userInfo = reactive<interfaceUserInfo>({
      nickname: null,
      id: null,
      age: null,
      gender: null,
      school: null,
      job: null,
    })

    const modifyForm = (): void => {
      modify.value = !modify.value
    }

    const router = useRouter()
    const okForm = (): void => {
      changeUserInfo(
        userInfo.nickname,
        userInfo.id,
        userInfo.age,
        userInfo.gender,
        userInfo.school,
        userInfo.job
      ).then((res) => {
        modify.value = true
        dialogFormVisible.value = false
        ElNotification({
          title: 'OK',
          message: res.data.msg,
          position: 'top-right',
          type: 'success',
          duration: 1000,
        })
        setTimeout(() => {
          router.push('/')
        }, 1000)
      })
    }

    onMounted(() => {
      const id: number = parseInt(localStorage.getItem('userId'))
      getUserInfo(id).then((res) => {
        const data = res.data.data[0]
        for (const key in data) {
          userInfo[key] = data[key]
        }
      })
    })
    return {
      userInfo,
      dialogFormVisible,
      formLabelWidth,
      show,
      modify,
      modifyForm,
      okForm,
    }
  },
})
</script>
<style scoped lang="scss">
.el-input {
  width: 15rem;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>